<template>
    <transition :name='transition'>
        <div 
            class="component-modal" 
            :class="{
                'bottom':mode == 'bottom',
                'top':mode == 'top',
                'top-no-fade':mode == 'top-no-fade',
                'android': os == 'Android'
            }"
            v-show="show">
            <div class="component-modal__mask" @click="closeOnMask"></div>
            <div class="component-modal__container" :style='styleContainer' @click='containerClick'>
                <i class="component-modal__close iconfont icon-close-pure" @click="emitClose" v-if='closeButton'></i>
                <!-- <div class="component-modal__header">
                    <span>{{title}}</span>
                </div> -->
                <p class="component-modal__tip" v-if='tip'>{{tip}}</p>
                <div class="component-modal__main">
                    <slot></slot>
                </div>
            </div>
            <i class="component-modal__delete iconfont icon-delete" @click.stop="emitDelete" v-if='deleteButton'></i>
        </div>
    </transition>
</template>

<script>
    import buttonLoading from './ButtonLoading.vue'
    import { getOS } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        components:{ buttonLoading },
        props: {
            loading:{
                type: Boolean,
                default: false
            },
            view:{
                type: Boolean,
                default:false
            },
            confirmText:{
                type: String,
                default: '确定'
            },
            closeButton:{
                type: Boolean,
                default:false
            },
            deleteButton:{
                type: Boolean,
                default:false
            },
            title:{
                type: String,
                default:''
            },
            tip:{
                type: String,
                default:''
            },
            width:{
                type: String,
                default:'92%'
            },
            mode: {
                type: String,
                default:'normal'
            },
            show: {
                type: Boolean,
                required: true,
                default:false
            },
            maskClose:{
                type: Boolean,
                default:true
            },
            transparent:{
                type: Boolean,
                default: false
            },
            transition:{
                type: String,
                default:'component-modal'
            }
        },
        computed:{
            styleContainer(){
                let params = {
                    width: this.width
                }
                if(this.transparent){
                    params.background = 'transparent'
                    params.boxShadow = 'none'
                }
                return params
            },
        },
        data() {
            return {
                os:getOS(),
            }
        },
        methods:{
            // actions
            ...mapActions([
                'setGoHome'
            ]),

            emitClose(){
                this.$emit('close')
            },
            emitDelete(){
                this.$emit('delete')
            },
            emitConfirm(){
                this.$emit('confirm')
            },
            closeOnMask(){
                if(this.maskClose){
                    this.emitClose()
                }
            },
            containerClick(){
                if(this.view) this.emitClose()
            }
        },
        watch: {
            'show'(newVal,oldVal){
                if(newVal != oldVal){
                    if(newVal == true) {
                        this.setGoHome(false)
                    }
                    else{
                        this.setGoHome(true)
                    }
                }
            }
        },
        mounted(){
            //alert($('body')[0].offsetHeight)
            //alert($('body')[0].clientHeight)$('body')[0].offsetHeight
            if(getOS() == "Android"){
                $('.component-modal').height("130%")
            }else if(getOS() == "iOS"){
                $('.component-modal').height("100%")
            }
            /*$('.component-modal').height($('body')[0].offsetHeight);
            $('.component-modal__mask').height($('body')[0].offsetHeight+100);*/
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";
    .component-modal{
        position: absolute;
        z-index: $zIndex_modal;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing:border-box;
        transition: all 200ms ease;
        background-color: rgba(0, 0, 0, 0.36);
        transform:translate3d(0,0,0);
        overflow:auto;
        .component-button-loading{
            margin-top:0;
            width: 2em;
        }
        &.bottom{
            .component-modal__container{
                top:auto;
                width: 100%!important;
                bottom:0;
                left:0;
                transform:translate3d(0,0,0);
                box-shadow:0 0 16px 0 rgba(0,0,0,0.12), 0 16px 16px 0 rgba(0,0,0,0.12);
            }
        }
        &.top{
            .component-modal__container{
                top:0;
                width: 100%!important;
                bottom:auto;
                left:0;
                transform:translate3d(0,0,0);
                box-shadow:0 0 16px 0 rgba(0,0,0,0.12), 0 16px 16px 0 rgba(0,0,0,0.12);
            }
        }
        &.top-no-fade{
            .component-modal__container{
                top:0;
                width: 100%!important;
                bottom:auto;
                left:0;
                transform:translate3d(0,0,0);
                box-shadow:0 0 16px 0 rgba(0,0,0,0.12), 0 16px 16px 0 rgba(0,0,0,0.12);
            }
        }
    }
    .component-modal__header{
        margin: 0px;
        color: rgba(0, 0, 0, 0.870588);
        font-size: 20px;
        line-height: 32px;
        font-weight: 400;
        border-bottom: none;
        padding:24px 24px 20px 24px;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .component-modal__main{
        padding:24px;
    }

    .component-modal__buttons{
        display:flex;
        justify-content:flex-end;
        text-align:center;
        padding-top: 117px;
        padding:8px;
        .component-modal__button{
            border-radius:3px;
            cursor:pointer;
            transition:ease .3s all;
            font-size: 15px;
            display: block;
            color:$green;
            padding: 10px 20px;
            &:hover{
                background-color: $grayLight;
            }
        }
    }

    .component-modal__mask {
        width: 100%;
        width: 100%;
        height: 100.1%;
    }

    .component-modal__container {
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling:touch;
        border-radius:2px;
        position:absolute;
        width: 90%;
        max-height:90%;
        box-sizing:border-box;
        overflow:auto;
        z-index:2;
        top:50%;
        left:50%;
        transform:translate3d(-50%,-50%,0);
        transition: all 250ms ease;
        background-color: #fff;
        background:#ffffff;
        box-shadow:0 0 16px 0 rgba(0,0,0,0.12), 0 16px 16px 0 rgba(0,0,0,0.12);
        border-radius:2px;

    }
    .component-modal__tip{
        padding-top: 16px;
    }
    .component-modal__close{
        z-index:2;
        cursor:pointer;
        position: absolute;
        left: 16px;
        top: 16px;
        font-size: 24px;
        width: 30px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        transition:color ease .3s;
        &:hover{
            color:#000;
        }
    }
    .component-modal__delete{
        cursor:pointer;
        position: absolute;
        color:#fff;
        font-size: 40px;
        left: 50%;
        z-index:3;
        transform:translate(-50%,0);
        bottom: 5%;
        text-align: center;
        transition:color ease .3s;
        &:active{
            color:#000;
        }
    }
    .component-modal__cancle{
        @extend %font-button;
        width:64px;
        padding:15px 0;
        display:block;
        text-align:center;
        &:active{
            color:darken(#fff,10%)
        }
    }
    .modal-title{
        @extend %font-headline;
        color:rgba(#fff,.5);
        text-align:center;
        flex:1;
    }
    .modal-confirm{
        @extend %font-button;
        padding:15px 0;
        width:64px;
        display:block;
        text-align:center;
        &:active{
            color:darken(#fff,10%)
        }
    }

    .modal-body {
        padding: 0 16px 40px 16px;
        h2{
            padding:16px 0;
            text-align:center;
            font-size:15px;
        }
        p{
            color:$gray;
            line-height:1.5;
        }
    }
    .component-modal-enter {
        opacity: 0;
    }

    .component-modal-leave-active {
        opacity: 0;
    }
    .component-modal-enter .component-modal__container,
    .component-modal-leave-active .component-modal__container {
      transform: translate3d(-50%,-50%,0) scale(.95);
    }
    .component-modal-enter.bottom .component-modal__container,
    .component-modal-leave-active.bottom .component-modal__container {
      transform: translate3d(0,10%,0);
    }
    .component-modal-enter.top .component-modal__container,
    .component-modal-leave-active.top .component-modal__container {
      transform: translate3d(0,-10%,0);
    }
    .component-modal-enter.top-no-fade .component-modal__container,
    .component-modal-leave-active.top-no-fade .component-modal__container {
      opacity:1;
      transform: translate3d(0,-100%,0);
    }
    .component-modal-enter.android .component-modal__container,
    .component-modal-leave-active.android .component-modal__container {
      transform: translate3d(-50%,-50%,0);
    }
    .component-modal-enter.android.bottom .component-modal__container,
    .component-modal-leave-active.android.bottom .component-modal__container {
      transform: translate3d(0,0,0);
    }
    .component-modal-enter.android.top .component-modal__container,
    .component-modal-leave-active.android.top .component-modal__container {
      transform: translate3d(0,0,0);
    }
    .component-modal-enter.android.top-no-fade .component-modal__container,
    .component-modal-leave-active.android.top-no-fade .component-modal__container {
      transform: translate3d(0,0,0);
    }


    .modal-warning{
        .modal-header{
            @extend %font-title;
            color:$importColor;
            background-color: transparent;
            padding:10px 0 16px 0;

        }
    }
    .modal-bottom{
        .modal-container{
            width: 100%;
            max-height:90%;
            top:auto;
            bottom:0;
            left:0;
            transform:translate3d(0,0,0);
        }
        .modal-enter .modal-container,
        .modal-leave .modal-container {
            transform:translate3d(0,0,0);
        }
    }

</style>
